<template>
  <view
    class="goods-discount"
    v-if="
      showGoodsDiscount && (cardList && cardList.length > 0)
    "
    :style="[outModuleCss]"
  >
    <view :style="[moduleBgCss]" class="module-bg"></view>
    <view class="discount-section">
      <!-- <view
        class="discount-row-item"
        v-if="couponList.length"
        @click="handleToShowCoupon"
      >
        <view class="row-label">{{ $t("goods.discountTitle") }}</view>
        <view class="row-content">
          <view class="content-body">
            <view class="remark-box">
              <span>{{ $t("diy.discount") }}</span>
            </view>
            <view class="discount-text">{{ couponText }}</view>
            <i class="iconfont icon-arrow-right"></i>
          </view>
        </view>
      </view>
      <view
        class="split-line"
        v-if="couponList.length && goodsInfo.verify_card_id.length"
      ></view> -->
      <view
        :class="[
          'discount-row-item',
          'row-last',
          'no-bottom-padding',
        ]"
        v-if="goodsInfo.verify_card_id.length"
        @click="handleToShowActive"
      >
        <view class="row-label">活动</view>
        <view class="row-content">
          <view class="content-body">
            <view class="remark-box blue-box"
              ><span
                >赠送{{ cardTans[goodsInfo.verify_card_id[0].type] }}</span
              ></view
            >
            <view class="discount-text">{{
              goodsInfo.verify_card_id[0].name
            }}</view>
            <i class="iconfont icon-arrow-right"></i>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { diySysPageMixin } from "@/components/diySystemPage/mixins/index.js";

export default {
  name: "",
  props: {
    propsData: {
      type: Object,
      default: {},
    },
    goodsInfo: {
      type: Object,
      default: {},
    },
    couponList: {
      type: Array,
      default: [],
    },
    cardList: {
      type: Array,
      default: [],
    },
  },
  mixins: [diySysPageMixin],
  components: {},
  data() {
    return {
      // 储值卡
      card: [],
      // 优惠券
      coupon: null,
      discount: false,
      cardTans: ["", "核销卡", "礼品卡", "储值卡", "虚拟卡", "视频卡"],
    };
  },
  mounted() {
    if (this.couponList.length) {
      this.coupon = this.couponList[0];
    }
  },
  created() {},
  watch: {},
  computed: {
    showGoodsDiscount() {
      return this.propsData.params.showGoodsDiscount;
    },
    couponText() {
      if (!this.coupon) return "";
      if (this.coupon.discount_type == 1)
        return `领取${this.coupon.discount}折优惠券`;
      return `${this.$t("diy.discount1")}${parseInt(
        this.coupon.min_price
      )}${this.$t("diy.discount2")}${parseInt(this.coupon.sub_price)}${this.$t(
        "order.integral3"
      )}`;
    },
  },
  methods: {
    handleToShowCoupon() {
      this.$emit("showCoupon");
    },
    handleToShowActive() {
      this.$emit("showActive");
    },
  },
};
</script>

<style lang="scss" scoped>
.goods-discount {
  width: 100%;
  position: relative;
  font-family: PingFang SC;
  .discount-section {
    width: 100%;
    padding: 4.8vw 0 4.8vw 4.8%;
    .discount-row-item {
      width: 100%;
      display: flex;
      align-items: center;
      // padding-bottom: 4.8vw;
      .row-label {
        width: 82rpx;
        font-size: 26rpx;
        font-weight: 600;
        color: #262626;
      }
      .row-content {
        flex: 1;
        .content-body {
          width: 100%;
          display: flex;
          align-items: center;
          padding-right: 4.8vw;
          .remark-box {
            padding: 2rpx 0.7vw 0;
            height: 3.46vw;
            background: #fee9e6;
            border-radius: 4rpx;
            display: flex;
            align-items: center;
            span {
              transform: scale(0.8);
              font-size: 24rpx;
              height: 24rpx;
              line-height: 24rpx;
              color: #f1270c;
              display: block;
            }
          }
          .blue-box {
            border: 2rpx solid #5a91fe;
            background: #ffffff;
            span {
              color: #5a91fe;
            }
          }
          .discount-text {
            flex: 1;
            padding-left: 3.73vw;
            font-size: 26rpx;
            font-weight: 400;
            color: #262626;
          }
          .iconfont {
            font-size: 22rpx;
            color: #000000;
          }
        }
      }
    }
    .row-last {
      padding-bottom: 0;
      padding-top: 4.8vw;
    }
    .split-line {
      width: 88.5%;
      height: 2rpx;
      background: #f6f6f6;
      float: right;
      margin-top: 4.8vw;
    }
    .no-bottom-padding {
      padding-top: 0;
    }
  }

  .discount {
    background-color: #ffffff;
    border-radius: 22rpx 22rpx 0rpx 0rpx;
    padding-bottom: 32rpx;
    .discount-top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 98rpx;
      padding: 0rpx 35rpx;
      background-color: #ffffff;

      image {
        width: 40rpx;
        height: 40rpx;
      }

      view {
        font-size: 32rpx;
        font-weight: bold;
        color: #262626;
      }
    }
    .discount-content {
      margin-top: 15rpx;
      padding: 0rpx 35rpx;
      background-color: #ffffff;

      .discount-content-one {
        font-size: 26rpx;
        color: #8c8c8c;
      }

      .discount-content-two {
        margin-top: 36rpx;
        display: flex;
        align-items: flex-start;

        > view:first-child {
          font-size: 20rpx;
          font-weight: bold;
          color: #f22b11;
          background-color: #fee9e6;
          width: 99rpx;
          height: 32rpx;
          text-align: center;
          line-height: 32rpx;
          border-radius: 6rpx;
        }

        > view:last-child {
          margin-left: 20rpx;

          view {
            margin-bottom: 4rpx;
            font-size: 26rpx;
            color: #2e2d2d;
          }
        }
      }
    }
    .discount-list {
      margin-top: 60rpx;
      padding: 0rpx 35rpx;

      .discount-list-title {
        font-size: 26rpx;
        color: #8c8c8c;
      }

      .discount-list-item {
        margin-top: 32rpx;
        display: flex;
        align-items: center;
        border-radius: 16rpx;
        background-color: #fd504d;
        padding: 30rpx 30rpx 30rpx 0rpx;

        > view:first-child {
          text-align: center;
          width: 320rpx;
          border-right: 1rpx dashed #ffffff;

          view:first-child {
            font-size: 48rpx;
            font-weight: bold;
            color: #ffffff;
          }

          view:last-child {
            margin-top: 6rpx;
            font-size: 20rpx;
            color: #ffffff;
          }
        }

        > view:last-child {
          display: flex;
          justify-content: space-between;
          align-items: center;
          padding-left: 20rpx;
          flex: 1;

          > view:first-child {
            .tongyong-top {
              font-size: 26rpx;
              color: #ffffff;
            }

            .tongyong {
              word-wrap: break-word;
              word-break: normal;
              width: 290rpx;
              font-size: 26rpx;
              color: #ffffff;
            }

            .youxiao {
              word-wrap: break-word;
              word-break: normal;
              width: 290rpx;
              margin-top: 10rpx;
              font-size: 20rpx;
              color: #ffffff;
            }
          }

          > view:last-child {
            width: 124rpx;
            height: 44rpx;
            text-align: center;
            line-height: 44rpx;
            background-color: #ffffff;
            border-radius: 22rpx;
            font-size: 22rpx;
            color: #ff0000;
          }
        }
      }

      .select-discount {
        background-color: #fdf7f0;

        > view:first-child {
          width: 320rpx;
          border-right: 1rpx dashed #ff0000;

          view:first-child {
            color: #ff0000;
          }

          view:last-child {
            color: #ff0000;
          }
        }

        > view:last-child {
          > view:first-child {
            view:first-child {
              color: #ff0000;
            }

            view:last-child {
              color: #ff0000;
            }
          }

          > view:last-child {
            width: 122rpx;
            height: 42rpx;
            text-align: center;
            line-height: 42rpx;
            border-radius: 22rpx;
            font-size: 22rpx;
            color: #ff0000;
            border: 1rpx solid #ff0000;
          }
        }
      }
    }
  }

  .module-bg {
    width: 100%;
    height: 100%;
    z-index: -1;
    position: absolute;
    left: 0;
    top: 0;
  }

  .add-padding-bottom {
    padding-bottom: 4.8vw;
  }
}
</style>
